<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todos</title>
    <link rel="stylesheet" href="css/index.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            background-color: #F5F5F5;
        }
        [v-cloak]{
            display: none;
        }
        .finish-text{
            text-decoration: line-through;
            color: #E6E8EB!important;
        }
        .ischeckin{
            border: 1px solid #DEB887;
        }
        .changecolor{
            color: #E6E8EB!important;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="todo-outer" v-cloak>
            <h1>todos</h1>
            <div class="todobox">
                <div class="todo-inputbox">
                    <div class="lab" @click="checkedAll" :class="{changecolor:isCheckedAll}">﹀</div>
                    <input type="text" placeholder="Whats need to be done?" v-model="todoVal" @keyup.enter="addTodo">
                </div>
                <div class="todo-itemlist">
                    <!-- <allchecktodo :todo="todoList" @del="delTodo"></allchecktodo>
                    <checkedtodo :todo="todoList" @del="delTodo"></checkedtodo>
                    <nocheckedtodo :todo="todoList" @del="delTodo"></nocheckedtodo> -->
                    <keep-alive>
                        <component :is="configName" :todo="todoList" @del="delTodo"></component>
                    </keep-alive>

                </div>
                <div class="todo-config-box">
                    <span>{{noCheckedNum}} items left</span>
                    <span @click="allTodo" :class="{ischeckin:configName === 'allchecktodo'}">All</span>
                    <span @click="noCheckTodo" :class="{ischeckin:configName === 'nocheckedtodo'}">Active</span>
                    <span @click="checkTodo" :class="{ischeckin:configName === 'checkedtodo'}">Completed</span>
                    <span @click="clearChecked" v-show="checkedNum!=0">Clear completed</span>
                    <div class="todo-config-box-footer1"></div>
                    <div class="todo-config-box-footer2"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="../../../public.js"></script>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        //包含所有todo的组件
        Vue.component("allchecktodo",{
            
            props:{
                todo:Array
            },
            data:function(){
                return{
                    todoList:this.todo,
                }
            },
            template:`
            <div>
            <div class="todo-item" v-for="(item,index) in todoList " :key="item.id">
                        <input type="checkbox"  :checked="item.check"  @change="judgeCheckAll(index,$event)">
                        <div :class="['todo-item-text',{'finish-text':item.check}]" @dblclick="$root.showInput">{{item.val}}</div>
                        <div class="hiddenbox"><input type="text" v-model="item.val" @blur="$root.hiddenInput"></div>
                        <span @click="delTodo(index)">×</span>
            </div>
        </div>
            `,
            methods:{
                delTodo:function(index){
                    this.$emit("del",index)
                },
                judgeCheckAll:function(index,e){
                    // console.log(index,e);
                    vm.todoList[index].check = e.target.checked;
                    for(let j=0;j<vm.todoList.length;j++){
                        if(vm.todoList[j].check === false){
                            vm.isCheckedAll = false;
                            return;
                        }   
                    }
                    vm.isCheckedAll = true;
                    
                },
                
            }
        });
        //包含所有选中的todo的组件
        Vue.component("checkedtodo",{
            
            props:{
                todo:Array
            },
            data:function(){
                return{
                    todoList:this.todo,
                    
                }
            },
            computed: {
                checkList:function(){
                    let ls = [];
                    for(let i=0;i<this.todoList.length;i++){
                        if(this.todoList[i].check === true){
                            ls.push(this.todoList[i]);
                        }
                    }
                    return ls;
                }
            },
            template:`
            <div>
            <div class="todo-item" v-for="(item,index) in checkList" :key="item.id">
                        <input type="checkbox"  :checked="item.check" @change="judgeCheckAll(index,$event)">
                        <div :class="['todo-item-text',{'finish-text':item.check}]" @dblclick="$root.showInput">{{item.val}}</div>
                        <div class="hiddenbox"><input type="text" v-model="item.val" @blur="$root.hiddenInput"></div>
                        <span @click="delTodo(index)">×</span>
            </div>
        </div>
            `,
            methods:{
                delTodo:function(index){
                    this.$emit("del",index)
                },
                judgeCheckAll:function(index,e){
                    // console.log(index,e);
                    this.checkList[index].check = e.target.checked;
                    for(let j=0;j<vm.todoList.length;j++){
                        if(vm.todoList[j].check === false){
                            vm.isCheckedAll = false;
                            return;
                        }   
                    }
                    vm.isCheckedAll = true;
                    
                },
            }
        });
        //包含所有未选中的todo的组件
        Vue.component("nocheckedtodo",{
            
            props:{
                todo:Array
            },
            data:function(){
                return{
                    todoList:this.todo,
                    
                }
            },
            computed: {
                nocheckList:function(){
                    let ls = [];
                    for(let i=0;i<this.todoList.length;i++){
                        if(this.todoList[i].check === false){
                            ls.push(this.todoList[i]);
                        }
                    }
                    return ls;
                }
            },
            template:`
            <div>
            <div class="todo-item" v-for="(item,index) in nocheckList" :key="item.id">
                        <input type="checkbox"  :checked="item.check" @change="judgeCheckAll(index,$event)">
                        <div :class="['todo-item-text',{'finish-text':item.check}]" @dblclick="$root.showInput">{{item.val}}</div>
                        <div class="hiddenbox"><input type="text" v-model="item.val" @blur="$root.hiddenInput"></div>
                        <span @click="delTodo(index)">×</span>
            </div>
        </div>
            `,
            methods:{
                delTodo:function(index){
                    this.$emit("del",index)
                },
                judgeCheckAll:function(index,e){
                    // console.log(index,e);
                    this.nocheckList[index].check = e.target.checked;
                    for(let j=0;j<vm.todoList.length;j++){
                        if(vm.todoList[j].check === false){
                            vm.isCheckedAll = false;
                            return;
                        }   
                    }
                    vm.isCheckedAll = true;
                    
                },
            }
        });
        let vm = new Vue({
            el:"#app",
            data:{
                todoVal:"",
                todoList:[],
                configName:"allchecktodo",
                isCheckedAll:false
            },
            computed:{
                noCheckedNum:function(){
                    let ls = 0;
                    for(let i=0;i<this.todoList.length;i++){
                        if(this.todoList[i].check === false){
                            ls++;
                        }
                    }
                    return ls;
                },
                checkedNum:function(){
                    let ls = 0;
                    for(let i=0;i<this.todoList.length;i++){
                        if(this.todoList[i].check === true){
                            ls++;
                        }
                    }
                    return ls;
                }
            },
            methods: {
                addTodo:function(){
                    if(this.todoVal.trim() != ""){
                        this.todoList.push({
                        id:new Date().getTime(),
                        val:this.todoVal,
                        check:false
                    });
                    }
                    this.todoVal = "";
                },
                delTodo:function(id){
                    this.todoList.splice(id,1);
                },
                allTodo:function(){
                    this.configName = "allchecktodo";
                },
                checkTodo:function(){
                    this.configName = "checkedtodo";
                },
                noCheckTodo:function(){
                    this.configName = "nocheckedtodo";
                },
                clearChecked:function(){
                    // for(let i=0;i<this.todoList.length;i++){
                    //     if(this.todoList[i].check === true){
                    //         this.todoList.splice(i,1);
                    //     }
                    // }
                   
                    this.todoList.forEach((ele,index) => {
                        if(ele.check === true){
                          this.todoList.splice(index,1);
                        }
                    });
                },
                checkedAll:function(){
                    if(this.todoList.length === 0){
                        return;
                    }
                    if(this.isCheckedAll === false){
                        for(let j=0;j<this.todoList.length;j++){
                            this.todoList[j].check = true;
                        }
                        this.isCheckedAll = true;
                    }else{
                        for(let i=0;i<this.todoList.length;i++){
                            this.todoList[i].check = false;
                        }
                        this.isCheckedAll = false;
                    }
                },
                showInput:function(e){
                    e.target.parentNode.children[2].style.display = "block";
                    e.target.parentNode.children[2].firstChild.focus();
                },
                hiddenInput:function(e){
                    e.target.parentNode.style.display = "none";
                }

                

            },
        });
    </script>
</body>
</html>